/* 
类似于上下文
这个是提取出来reducer
*/
import { createContext, useContext, useReducer } from 'react'
let GlobaleContext = createContext();
// 定义初始默认状态daultState  初始状态就是共享的公共状态
let defaultSate = {
    num: 100,
    msg: "学习使我快乐",
    carList: [1, 2, 3, 4, 5]
}
// 需要reducer函数    参数一 初始化状态   参数二  action要改变的状态
let reducer = (state, action) => {
    switch (action.type) {
        case "ADD_CART":
            let newState = JSON.parse(JSON.stringify(state));
            newState.carList.push(10);
            return newState;
        case "ADD":
            let addState = { ...state };
            addState.num += action.playnum
            return addState;
        default:
            return state;
    }
    return state
}
// 1.
function Home() {
// dispatch 用来更改reducer的          初始化状态   要概改变的
    let [state, dispatch] = useReducer(reducer, defaultSate)
    return (
        <div>
            <h1>组件共享数据</h1>
            <GlobaleContext.Provider value={{
                state,
                dispatch
            }}>
                <Two></Two>
                <One></One>
            </GlobaleContext.Provider>
        </div>
    )
}
// 定义子组件
function One() {
//想要渲染num  1.先获取共享数据的value值
    let value = useContext(GlobaleContext)
    let { state, dispatch } = value;
    return (
        <div>
            <h2>one组件 ---- {state.num} --- {state.msg}</h2>
            <ul>          
                {
                    state.carList.map((item, index) => {
                        return (
                            <li key={index}>{item}</li>
                        )
                    })
                }
            </ul>
{/* reducer状态 调用dispatch方法    传一个对象类型 */}
            <button onClick={() => {
                dispatch({
                    type: "ADD",
                    playnum: 10
                })
            }}>+=10</button>
        </div>
    )
}
//子组件
function Two() {
    let value = useContext(GlobaleContext);
    let { state, dispatch } = value;
    return (
        <div>
            <h2>two组件---{state.num}----{state.msg}</h2>
            <div>
                购物车数量：{state.carList.length}
            </div>
{/* 想要改变购物车状态  是reducer里面的   调用reducer里的dispatch方法  调用dispath  上面的return state被触发*/}
            <button onClick={() => {
                dispatch({
                    type: "ADD_CART"
                })
            }}>加入购物车</button>
        </div>
    )
}

// 暴露父组件
export default Home;